<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./favicon-32x32.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>foreignerWeb</title>
    <!-- from：https://designcode.io/courses/ -->
</head>
<body>
    <!-- top部分 -->
    <div class="topbar">
        Get 50% off during WWDC 2025!
    </div>

    <!-- background盒子 -->
    <div class="bg">
        <div class="ball1"></div>
        <div class="ball2"></div>
    </div>、

    <!-- head盒子 -->
    <div class="header w">
        <a href="#" class="logo">
            <img src="./img/logo.svg" alt="#">
        </a>

        <div class="nav">
            <a href="#">
              <button>
                <img src="./img/courses.svg" alt="#">
                <p>Courses</p>
              </button>
            </a>

            <a href="#">
              <button>
                <img src="./img/tutorials.svg" alt="#">
                <p>Tutorials</p>
              </button>
            </a>

            <a href="#">
              <button>
                <img src="./img/livestreams.svg" alt="#">
                <p>Livestreams</p>
              </button>
            </a>

            <a href="#">
              <button>
                <img src="./img/pricing.svg" alt="#">
                <p>Pricing</p>
              </button>
            </a>

            <a href="#">
              <button>
                <img src="./img/more.svg" alt="#">
              </button>
            </a>

            <a href="#">
              <button>
                <img src="./img/search.svg" alt="#">
              </button>
            </a>

            <a href="#">
              <button>
                <img src="./img/account.svg" alt="#">
              </button>
            </a>
        </div>

        <div class="mobile-nav">
            <img src="./img/hamburger-menu.svg" alt="#">
        </div>
    </div>

    <!-- courseBox -->
    <div class="course w">
        <div class="course-l">
            <p class="time">300 HOURS OF COURSES</p>
            <h2>Learn the best tools and platforms</h2>
            <p>We focus on industry leading platforms so that you can be prepared for your next job. Then we teach all we can about them.</p>
        </div>
        <div class="course-r">
            <div class="icon">
                <ul>
                  <li><a href="#"><img src="./img/swiftui-logo.svg" alt=""></a></li>
                  <li><a href="#"><img src="./img/react-logo.svg" alt=""></a></li>
                  <li><a href="#"><img src="./img/figma-logo.svg" alt=""></a></li>
                  <li><a href="#"><img src="./img/sketch-logo.svg" alt=""></a></li>
                  <li><a href="#"><img src="./img/framer-logo.svg" alt=""></a></li>
                  <li><a href="#"><img src="./img/webflow-logo.svg" alt=""></a></li>
                  <li><a href="#"><img src="./img/protopie-logo.svg" alt=""></a></li>
                </ul>
            </div>
            <div class="search">
                <img src="./img/search.svg" alt="">
                <input type="search" placeholder="Search">
            </div>
        </div>
    </div>

    <div class="course-card">
        <div class="item">
            <figure>
                <img src="./img/pic.png" alt="">
                <div class="icon1">
                    <img src="./img/swiftui-logo.svg" alt="">
                </div>
                <div class="icon2">
                    <img src="./img/ldh.webp" alt="">
                </div>
            </figure>
            <h3>Design and Code User Interfaces with Galileo and Claude AI</h3>
            <p>17 videos - 5 hours</p>
            <div class="star">
                <img src="./img/star.svg" alt="">
            </div>
        </div>

        <div class="item">
            <figure>
                <img src="./img/pic.png" alt="">
                <div class="icon1">
                    <img src="./img/swiftui-logo.svg" alt="">
                </div>
                <div class="icon2">
                    <img src="./img/ldh.webp" alt="">
                </div>
            </figure>
            <h3>Design and Code User Interfaces with Galileo and Claude AI</h3>
            <p>17 videos - 5 hours</p>
            <div class="star">
                <img src="./img/star.svg" alt="">
            </div>
        </div>

        <div class="item">
            <figure>
                <img src="./img/pic.png" alt="">
                <div class="icon1">
                    <img src="./img/swiftui-logo.svg" alt="">
                </div>
                <div class="icon2">
                    <img src="./img/ldh.webp" alt="">
                </div>
            </figure>
            <h3>Design and Code User Interfaces with Galileo and Claude AI</h3>
            <p>17 videos - 5 hours</p>
            <div class="star">
                <img src="./img/star.svg" alt="">
            </div>
        </div>

        <div class="item item4">
            <figure>
                <img src="./img/pic4.png" alt="">
                <div class="icon1">
                    <img src="./img/swiftui-logo.svg" alt="">
                </div>
                <div class="icon2">
                    <img src="./img/ldh.webp" alt="">
                </div>
            </figure>
            <h3>SwiftUI Concurrency</h3>
            <p>20 videos - 3 hours</p>
            <div class="star">
                <img src="./img/star.svg" alt="">
            </div>
        </div>

        <div class="item">
            <figure>
                <img src="./img/pic.png" alt="">
                <div class="icon1">
                    <img src="./img/swiftui-logo.svg" alt="">
                </div>
                <div class="icon2">
                    <img src="./img/ldh.webp" alt="">
                </div>
            </figure>
            <h3>Design and Code User Interfaces with Galileo and Claude AI</h3>
            <p>17 videos - 5 hours</p>
            <div class="star">
                <img src="./img/star.svg" alt="">
            </div>
        </div>

        <div class="item">
            <figure>
                <img src="./img/pic.png" alt="">
                <div class="icon1">
                    <img src="./img/swiftui-logo.svg" alt="">
                </div>
                <div class="icon2">
                    <img src="./img/ldh.webp" alt="">
                </div>
            </figure>
            <h3>Design and Code User Interfaces with Galileo and Claude AI</h3>
            <p>17 videos - 5 hours</p>
            <div class="star">
                <img src="./img/star.svg" alt="">
            </div>
        </div>

        <div class="item">
            <figure>
                <img src="./img/pic.png" alt="">
                <div class="icon1">
                    <img src="./img/swiftui-logo.svg" alt="">
                </div>
                <div class="icon2">
                    <img src="./img/ldh.webp" alt="">
                </div>
            </figure>
            <h3>Design and Code User Interfaces with Galileo and Claude AI</h3>
            <p>17 videos - 5 hours</p>
            <div class="star">
                <img src="./img/star.svg" alt="">
            </div>
        </div>

        <div class="item">
            <figure>
                <img src="./img/pic.png" alt="">
                <div class="icon1">
                    <img src="./img/swiftui-logo.svg" alt="">
                </div>
                <div class="icon2">
                    <img src="./img/ldh.webp" alt="">
                </div>
            </figure>
            <h3>Design and Code User Interfaces with Galileo and Claude AI</h3>
            <p>17 videos - 5 hours</p>
            <div class="star">
                <img src="./img/star.svg" alt="">
            </div>
        </div>

        <div class="item item4">
            <figure>
                <img src="./img/pic4.png" alt="">
                <div class="icon1">
                    <img src="./img/swiftui-logo.svg" alt="">
                </div>
                <div class="icon2">
                    <img src="./img/ldh.webp" alt="">
                </div>
            </figure>
            <h3>SwiftUI Concurrency</h3>
            <p>20 videos - 3 hours</p>
            <div class="star">
                <img src="./img/star.svg" alt="">
            </div>
        </div>
    </div>

    <!-- story_card -->
    <div class="story-card w">
        <div class="story-l">
            <div class="story-l-left">
                <div class="top">
                    <img src="./img/ldh.webp" alt="">
                    <div>
                      <p class="name">Andyliu</p>
                      <p class="info">iOS Developer</p>
                    </div>
                </div>

                <div class="middle">
                    <img src="./img/Lingo.png" alt="">
                </div>

                <div class="desc">
                    Hey MengTo, I launched my iOS/watchOS app RunnerGoal almost completely built with SwiftUI. Thank you for the
                    design lessons and many controls.
                </div>

                <button>View on the app store</button>
            </div>

            <div class="story-l-right">
                <div class="top">
                    <img src="./img/ldh.webp" alt="">
                    <div>
                        <p class="name">Andyliu</p>
                        <p class="info">iOS Developer</p>
                    </div>
                </div>

                <div class="middle">
                    <img src="./img/Lingo.png" alt="">
                </div>

                <div class="desc">
                    Hey MengTo, I launched my iOS/watchOS app RunnerGoal almost completely built with SwiftUI. Thank you for the
                    design lessons and many controls.
                </div>

                <button>View on the app store</button>
            </div>
        </div>

        <div class="story-r">
            <div class="story-r-top">
                <div class="top toggle">
                    <img src="./img/ldh.webp" alt="">
                    <div>
                        <p class="name">Andyliu</p>
                        <p class="info">iOS Developer</p>
                    </div>
                </div>

                <div class="pic">
                    <img src="./img/460x0w-3.png" alt="">
                </div>

                <div class="info">
                    <div class="top">
                        <img src="./img/ldh.webp" alt="">
                        <div>
                            <p class="name">Andyliu</p>
                            <p class="info">iOS Developer</p>
                        </div>
                    </div>

                    <div class="desc">
                        Hey MengTo, I launched my iOS/watchOS app RunnerGoal almost completely built with SwiftUI. Thank you for
                        the
                        design lessons and many controls.
                    </div>

                    <button>View on the app store</button>
                </div>
            </div>

            <div class="story-r-bottom">
                <div class="top toggle">
                    <img src="./img/ldh.webp" alt="">
                    <div>
                        <p class="name">Andyliu</p>
                        <p class="info">iOS Developer</p>
                    </div>
                </div>
                
                <div class="pic">
                    <img src="./img/460x0w-3.png" alt="">
                </div>

                <div class="info">
                    <div class="top">
                        <img src="./img/ldh.webp" alt="">
                        <div>
                            <p class="name">Andyliu</p>
                            <p class="info">iOS Developer</p>
                        </div>
                    </div>

                <div class="desc">
                    Hey MengTo, I launched my iOS/watchOS app RunnerGoal almost completely built with SwiftUI. Thank you for
                    the
                    design lessons and many controls.
                </div>

                <button>View on the app store</button>
                </div>
            </div>
        </div>
    </div>

    <!-- bottomBox -->
    <div class="footer">
        <!-- con盒子裁剪波浪盒子 -->
        <div class="con">
            <div class="bolang"></div>
            <svg width="1440" height="699" viewBox="0 0 1440 699" fill="none" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <clipPath id="wave2">
                        <path
                          d="M1192 63.1469C979.197 -18.7459 969.021 -3.8326 747.038 15.147C525.055 34.1266 456.426 81.6931 291.038 63.147C125.65 44.6009 38.0215 68.2247 -41.1011 88.0053C-41.1011 175.938 -41.1013 376.556 -41.1013 376.556L1481 376.556L1481 63.1469C1481 63.1469 1405.19 145.19 1192 63.1469Z"
                          fill="url(#paint0_linear)"></path>
                    </clipPath>
                </defs>
            </svg>
        </div>

        <div class="footer-con">
            <div class="footer-con-left">
                <div class="item">
                    <a href="#">
                        <button>
                            <img src="./img/courses.svg" alt="">
                            <p>Courses</p>
                        </button>
                    </a>
                    <a href="#">
                        <button>
                            <img src="./img/tutorials.svg" alt="">
                            <p>Tutorials</p>
                        </button>
                    </a>
                    <a href="#">
                        <button>
                            <img src="./img/livestreams.svg" alt="">
                            <p>Livestreams</p>
                        </button>
                    </a>
                    <a href="#">
                        <button>
                            <img src="./img/pricing.svg" alt="">
                            <p>Pricing</p>
                        </button>
                    </a>
                    <a href="#">
                        <button>
                            <img src="./img/pricing.svg" alt="">
                            <p>Pricing</p>
                        </button>
                    </a>
                </div>

                <div class="item">
                    <a href="#">
                        <button>
                            <img src="./img/courses.svg" alt="">
                            <p>Courses</p>
                        </button>
                    </a>
                    <a href="#">
                        <button>
                            <img src="./img/tutorials.svg" alt="">
                            <p>Tutorials</p>
                        </button>
                    </a>
                    <a href="#">
                        <button>
                            <img src="./img/livestreams.svg" alt="">
                            <p>Livestreams</p>
                        </button>
                    </a>
                    <a href="#">
                        <button>
                            <img src="./img/pricing.svg" alt="">
                            <p>Pricing</p>
                        </button>
                    </a>
                    <a href="#">
                        <button>
                            <img src="./img/pricing.svg" alt="">
                            <p>Pricing</p>
                        </button>
                    </a>
                </div>
            </div>

            <div class="footer-con-right">
                <p> Site made with React, Gatsby,Netlify and Contentful. Learn how.</p>
                <p> Design+Code © 2025</p>
                <p> Terms of Service - Privacy Policy</p>
                <p>Need help? Contact Us </p>
            </div>
        </div>
    </div>
</body>
</html>